<template>
    <div :class="['skeleton-loader', customClass]">
        <div v-for="n in rows" :key="n" class="d-flex align-items-center mb-3 gap-3">
            <!-- 可选圆形头像 -->
            <div v-if="showAvatar" class="skeleton-circle" :class="themeClass"></div>

            <!-- 多行线条 -->
            <div class="flex-grow-1">
                <div v-for="m in lines" :key="m" class="skeleton-line mb-2" :style="{ width: lineWidth(m) }" :class="themeClass"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

defineProps({
    rows: { type: Number, default: 3 }, // 几组
    lines: { type: Number, default: 2 }, // 每组几行
    showAvatar: { type: Boolean, default: false },
    customClass: { type: String, default: '' }
});

// 控制每行宽度，最后一行短一点
const lineWidth = index => (index === 2 ? '50%' : '80%');

// 自动根据 body class 检测 theme（你也可以从 store 拿）
const themeClass = computed(() => (document.body.classList.contains('dark') ? 'skeleton-dark' : 'skeleton-light'));
</script>

<style scoped>
.skeleton-line,
.skeleton-circle {
    background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-highlight) 37%, var(--sk-base) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: 4px;
    height: 16px;
}
.skeleton-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

@keyframes shimmer {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

/* 💡 浅色主题变量 */
.skeleton-light {
    --sk-base: #e0e0e0;
    --sk-highlight: #f4f4f4;
}

/* 🌑 深色主题变量 */
.skeleton-dark {
    --sk-base: #3a3a3a;
    --sk-highlight: #4e4e4e;
}
</style>
